<template>
    <el-card id="main">
   
    </el-card>
</template>

<script >
import * as echarts from "echarts";


export default {
    mounted() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById("main"));

        myChart.setOption({
            legend: {
                top: "bottom",
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    restore: { show: true },
                    saveAsImage: { show: true },
                },
            },
            series: [
                {
                    name: "Nightingale Chart",
                    type: "pie",
                    radius: [50, 250],
                    center: ["50%", "50%"],
                    roseType: "area",
                    itemStyle: {
                        borderRadius: 8,
                    },
                    data: [
                        { value: 40, name: "心理防护" },
                        { value: 38, name: "玩转国学" },
                        { value: 32, name: "推荐" },
                        { value: 30, name: "习惯培养" },
                        { value: 28, name: "分阶成长" },
                        { value: 26, name: "智慧启蒙" },
                        { value: 22, name: "益智游戏" },
                        { value: 18, name: "白噪音" },
                    ],
                },
            ],
        });
    },
};
// var data = [];
// for (let i = 0; i < 5; ++i) {
//     data.push(Math.round(Math.random() * 200));
// }
// export default {
//     mounted() {
//         // 基于准备好的dom，初始化echarts实例
//         var myChart = echarts.init(document.getElementById("main"),null, {
            
//             height: 400
//         });
        
//         myChart.setOption({
//             xAxis: {
//                 max: 'dataMax'
//             },
//             yAxis: {
//                 type: 'category',
//                 data: ['A', 'B', 'C', 'D', 'E'],
//                 inverse: true,
//                 animationDuration: 300,
//                 animationDurationUpdate: 300,
//                 max: 2 // only the largest 3 bars will be displayed
//             },
//             series: [
//                 {
//                     realtimeSort: true,
//                     name: 'X',
//                     type: 'bar',
//                     data: data,
//                     label: {
//                         show: true,
//                         position: 'right',
//                         valueAnimation: true
//                     }
//                 }
//             ],
//             legend: {
//                 show: true
//             },
//             animationDuration: 3000,
//             animationDurationUpdate: 3000,
//             animationEasing: 'linear',
//             animationEasingUpdate: 'linear'
//         });

//         function update() {
//             var data = option.series[0].data;
//             for (var i = 0; i < data.length; ++i) {
//                 if (Math.random() > 0.9) {
//                     data[i] += Math.round(Math.random() * 2000);
//                 } else {
//                     data[i] += Math.round(Math.random() * 200);
//                 }
//             }
//             myChart.setOption(option);
//         }

//         setInterval(function () {
//             update();
//         }, 3000);
//     },
// };
</script>

<style lang="scss" scoped>
#main {
    height: 550px;
    // border: 1px solid red;
}
</style>